<!DOCTYPE html>
<html>
<head>
    <title>Resize test</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="icon" type="image/png" href="../iui/iui-favicon.png">
	<link rel="apple-touch-startup-image" href="../iui/iui-startup.jpg">
	<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon-hd.png" />

	<link rel="stylesheet" href="../iui/iui.css" type="text/css" />
	<link rel="stylesheet" href="../iui/t/default/default-theme.css"  type="text/css"/>
	<script type="application/x-javascript" src="../iui/iui.js"></script>
</head>

<body>

    <div class="toolbar">
        <h1 id="pageTitle"></h1>
    </div>
    
    <div id="test" title="Test" class="panel" selected="true">
		
    </div>

	<script type="application/x-javascript">
		var obj = document.getElementById('test');
		function logInfo() {
			obj.innerHTML += 'orientation: '+window.orientation+'<br>';
			obj.innerHTML += 'clientHeight: '+obj.clientHeight+'<br>';
			obj.innerHTML += 'innerHeight: '+window.innerHeight+'<br>';
			obj.innerHTML += '----------------------------<br>';
		}
		window.onload = setTimeout(logInfo, 300);
		window.addEventListener('orientationchange', logInfo, false);
	</script>

</body>
</html>